<template>
  <div ref="radarRef" class="time-ech" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import {post} from '@/utils/request.js'
export default {
  props:{
    // 获取分类字典
    dictEntity:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {
      chartInstance: null,
      option: {
        color: ["#3B8BFF", "#00DEE0"],
        legend: {
          orient: "vertical",
          right: "0",
          top: "10%",
          data: ["命中数量", "指标数量"],
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          show: true,
          textStyle: {
            align: "left",
          },
          formatter(params) {
            // 监测指标的名称
          let zbStr=['设备','网络','应用','人员','信息台账','基础环境']; 
          //  行为标签的名称
          let xwStr=this.dictEntity || ['主机','人员','应用','数据','网络','账号']
          let tipString=params.name+'<br/>'
          if(params.value.length>0){
            params.value.forEach((i,index)=>{
            tipString+=`${params.marker} <span style='width:100px;display:inline-block;'>${params.name=="指标数量" || params.name=="命中数量"?zbStr[index]:xwStr[index]}</span>&nbsp;&nbsp;&nbsp;<span style='text-align:right'>${i}</span><br/>`
          })
          }
          return tipString
        },
        },
        radar: {
          center: ["40%", "60%"],
          // shape: 'circle',
          alignTicks: false,
          indicator: [
            { name: "设备" },
            { name: "网络" },
            { name: "应用" },
            { name: "人员" },
            { name: "信息台账" },
            { name: "基础环境" },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            areaStyle: {
              opacity: 0.3,
            },
            data: [
              {
                value: [0, 0, 0, 0, 0],
                name: "命中数量",
              },
              {
                value: [0, 0, 0, 0, 0],
                name: "指标数量",
              },
            ],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["theme"]),
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        // 初始化对象
        this.chartInstance = echarts.init(this.$refs.radarRef, this.theme);
        this.chartInstance.setOption(this.option, true);
      });
    },
    getData(params) {
      this.$nextTick(() => {
        this.option.radar.indicator=params?.indicator;
        this.option.legend.data = params?.names;
        this.option.tooltip. formatter=function(params) {
            // 监测指标的名称
          let zbStr=['设备','网络','应用','人员','信息台账','基础环境']; 
          //  行为标签的名称
          let xwStr=['主机','人员','应用','数据','网络','账号'];
          let tipString=params.name+'<br/>'
          if(params.value.length>0){
            params.value.forEach((i,index)=>{
            tipString+=`${params.marker} <span style='width:100px;display:inline-block;'>${params.name=="指标数量" || params.name=="命中数量"?zbStr[index]:xwStr[index]}</span>&nbsp;&nbsp;&nbsp;<span style='text-align:right'>${i}</span><br/>`
          })
          }
          return tipString
        },
        this.option?.series[0]?.data.forEach((i, index) => {
          i.name = params.value[index]?.name;
          i.value = params.value[index]?.value;
        });
        // this.option.radar.indicator.forEach((i, index) => {
        //   i.max =
        //     params?.value[0]?.value[index] > params?.value[1]?.value[index]
        //       ? params?.value[0]?.value[index] + 10
        //       : params?.value[1]?.value[index] + 10;
        // });
        this.chartInstance.setOption(this.option, true);
      });
    },
  },
  mounted() {
    this.initChart();
    // console.log(this.chartInstance)
    // 添加随页面变化而变化
    /* window.addEventListener("resize", () => {
       this.chartInstance.resize();
     });*/
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose();
      this.initChart();
    },
  },
};
</script>

<style lang="scss" scoped>
.time-ech {
  width: 100%;
  height: 67%;
}
</style>
